<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>main</title>
    <!-- 引入vue -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!-- 引入阿里图标库 -->
    <link rel="stylesheet" href="../图标/quxiao/iconfont.css">
    <!-- 引入自定义CSS文件 -->
    <link rel="stylesheet" href="../css/main.css">
</head>

<body>

    <!-- 头部导航栏开始 -->
    <header>
        <!-- 响应式菜单切换按钮 -->
        <input type="checkbox" name="" id="toggler">
        <label for="toggler" class="fas fa-bars"></label>

        <!-- 网站Logo -->
        <a href="#" class="logo"><img src="../images/logo.png"></a>

        <!-- 导航菜单 -->
        <nav class="navbar">
            <a href="#home">首页</a>
            <a href="#about">关于我们</a>
            <a href="#products">产品</a>
            <a href="#review">评价</a>
            <a href="#contact">联系我们</a>
        </nav>

        <!-- 用户操作图标 -->
        <div class="icons">
            <div class="fas fa-search" id="search-btn"></div><!--搜素-->
            <div class="fas fa-heart" id="heart-btn"></div> <!-- 收藏 -->
            <div class="fas fa-shopping-cart" id="shop-btn"> </div> <!-- 购物车 -->
            <div class="fas fa-user" id="login-btn"></div> <!-- 用户中心 -->
        </div>

        <!-- 图标操作 -->

        <!--搜素-->
        <form action="" class="search-form">
            <input type="search" placeholder="search here..." id="search-box">
            <label for="search-box" class="fas fa-search"></label>
        </form>

        <!-- 收藏 -->
        <div class="heart">
            <!-- <div class="box">
                <i class="fas fa-times"></i>
                <div class="content">
                    <h3>organic food </h3>
                    <span class="price">$18.99</span>
                </div>
            </div> -->
            <h3 class="total">total :<span>共0项</span></h3>
            <a href="./shop.html" class="btn">去选购</a>
        </div>

        <!-- 购物车 -->
        <div class="shopping-cart">
            <!-- <div class="box">
                <i class="fas fa-times"></i>
                <img src="../images/product/04.jpg" alt="">
                <div class="content">
                    <h3>organic food </h3>
                    <span class="quantity">1</span>
                    <span class="multiply">×</span>
                    <span class="price">$18.99</span>
                </div>
            </div> -->
            <h3 class="total">total :<span>共0项，总计0元</span></h3>
            <a href="#" class="btn">去结算</a>
        </div>

        <!-- 用户登录 -->
        <form action="" class="login-form">
            <h3>登录</h3>
            <input type="email" placeholder="请输入您的邮箱账号" class="box">
            <input type="password" placeholder="请输入您的密码" class="box">
            <div class="remember">
                <input type="checkbox" name="" id="remember-me">
                <label for="remember-me">记住我</label>
            </div>
            <input type="submit" value="登录" class="btn">
            <p>没有账号？ <a href="./register.html">点击这里</a></p>
        </form>


    </header>
    <!-- 头部导航栏结束 -->

    <!-- 首页图开始 -->
    <section class="home" id="home">
        <div class="content">
            <h3>vegetables</h3>
            <span>Free Home Delivery Whthin 24 Hours Now</span>
            <p> 有机生鲜宅配，畅享健康美味！</p>
            <p>香脆可口，回味无穷，田园日志有机农业！</p>
            <a href="./shop.html" class="btn">立即购买</a>
        </div>
    </section>
    <!-- 首页图结束 -->

    <!-- 关于我们部分开始 -->
    <section class="about" id="about">
        <h1 class="heading"> <span>关于</span>我们 </h1>

        <div class="row">
            <div class="video-container">
                <video src="../images/adver.mp4" loop autoplay muted></video>
                <h3>年度最佳销售商</h3>
            </div>

            <div class="content">
                <h3>为什么选择我们？</h3>
                <p>选择有机，选择健康，让每一餐都成为对身体的温柔以待.新鲜直送，锁住营养，只为您和您的家人带来最安心的美味.</p>
                <p>Choose organic, choose healthy, and make every meal a gentle treatment for the body.
                    Freshly delivered, locked in nutrients, and only for you and your family, the most safe
                    deliciousness.</p>
                <a href="./video.html" class="btn">了解更多</a>
            </div>
        </div>
    </section>
    <!-- 关于我们部分结束 -->

    <!-- 图标展示部分开始 -->
    <section class="icons-container">
        <div class="icons">
            <img src="../images/images-flowers/icon-1.png" alt="">
            <div class="info">
                <h3>免费配送</h3>
                <span>所有订单</span>
            </div>
        </div>

        <div class="icons">
            <img src="../images/images-flowers/icon-2.png" alt="">
            <div class="info">
                <h3>10天退货</h3>
                <span>退款保证</span>
            </div>
        </div>

        <div class="icons">
            <img src="../images/images-flowers/icon-3.png" alt="">
            <div class="info">
                <h3>优惠与礼品</h3>
                <span>所有订单</span>
            </div>
        </div>

        <div class="icons">
            <img src="../images/images-flowers/icon-4.png" alt="">
            <div class="info">
                <h3>安全支付</h3>
                <span>PayPal保护</span>
            </div>
        </div>
    </section>
    <!-- 图标展示部分结束 -->

    <!-- 最新产品部分开始 -->
    <section class="products" id="products">
        <h1 class="heading">最新<span>产品</span></h1>

        <div class="box-container">
            <div class="box">
                <div class="image">
                    <div id="app1">
                        <template>
                            <el-carousel indicator-position="outside">
                                <el-carousel-item v-for="(item, index) in images" :key="index">
                                    <img :src="item.src" alt="carousel image">
                                </el-carousel-item>
                            </el-carousel>
                        </template>
                    </div>
                    <div class="icons">
                        <a class="fas fa-eye" href="./show.html"></a>
                        <a href="./shop.html" class="cart-btn">去看看</a>
                        <div href="#" class="fas fa-share"></div>
                    </div>
                </div>
            </div>

            <!-- 其他产品项类似，省略重复部分 -->

        </div>
    </section>
    <!-- 最新产品部分结束 -->

    <!-- 客户评价部分开始 -->
    <section class="review" id="review">
        <h1 class="heading">客户的<span>评价</span></h1>

        <div class="box-container">
            <div class="box">
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
                <p> 这家有机线上超市的商品种类非常齐全，从新鲜蔬果、全谷物、有机肉类到各类健康零食，应有尽有。
                    特别值得一提的是，他们的有机蔬菜和水果都是经过严格筛选的，品质上乘，新鲜度极高。此外，我还
                    发现了一些平时在实体超市难以找到的有机调味品和特色食材，这对于喜欢尝试不同健康食谱的我来说，简直是福音。</p>
                <div class="user">
                    <img src="../images/images-flowers/pic-1.png" alt="">
                    <div class="user-info">
                        <h3>小帅</h3>
                        <span>满意客户</span>
                    </div>
                </div>
                <span class="fas fa-quote-right"></span>
            </div>

            <div class="box-container">
                <div class="box">
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                    <p> 在追求健康生活方式日益盛行的今天，我偶然发现了这家有机线上超市，它如同一股清流，
                        为我提供了便捷且丰富的有机食品选择。物流配送是我非常看重的一点。这家平台在物流配
                        送方面做得相当不错，下单后通常能在较短时间内收到商品，而且包装也非常仔细，确保了
                        食品的新鲜度和完整性。如果遇到任何问题，客服团队总是能够迅速响应并提供满意的解决方案
                        ，这种周到的服务让我倍感安心。</p>
                    <div class="user">
                        <img src="../images/images-flowers/pic-2.png" alt="">
                        <div class="user-info">
                            <h3>小美</h3>
                            <span>满意客户</span>
                        </div>
                    </div>
                    <span class="fas fa-quote-right"></span>
                </div>

                <div class="box-container">
                    <div class="box">
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <p> 从界面设计到操作流程，这家有机线上超市都给人一种非常舒适和便捷的感觉。
                            商品分类清晰，搜索功能强大，使得我能够快速找到想要的商品。此外，平台还
                            提供了详细的商品信息和营养成分表，帮助我更好地了解食品的来源和营养价值。
                            这种注重用户体验的做法，无疑增加了我的购物满意度。</p>
                        <div class="user">
                            <img src="../images/images-flowers/pic-3.png" alt="">
                            <div class="user-info">
                                <h3>千条哥</h3>
                                <span>满意客户</span>
                            </div>
                        </div>
                        <span class="fas fa-quote-right"></span>
                    </div>


                    <!-- 其他评价项类似，省略重复部分 -->

                </div>
    </section>
    <!-- 客户评价部分结束 -->

    <!-- 联系我们部分开始 -->
    <section class="contact" id="contact">
        <h1 class="heading"> <span>联系</span>我们 </h1>

        <div class="row">
            <form action="">
                <input type="text" placeholder="姓名" class="box">
                <input type="email" placeholder="邮箱" class="box">
                <input type="number" placeholder="电话" class="box">
                <textarea name="" class="box" placeholder="留言" id="" cols="30" rows="10"></textarea>
                <input type="submit" value="发送消息" class="btn">
            </form>

            <div class="image">
                <img src="../images/recom.jpg" alt="">
            </div>
        </div>
    </section>
    <!-- 联系我们部分结束 -->

    <!-- 底部版权信息部分开始 -->
    <section class="footer">
        <div class="box-container">
            <div class="box">
                <h3>快速链接</h3>
                <a href="#home">首页</a>
                <a href="#about">关于我们</a>
                <a href="#products">最新产品</a>
                <a href="#review">评价</a>
                <a href="#contact">联系我们</a>
            </div>

            <div class="box">
                <h3>其他链接</h3>
                <a href="#">我的账户</a>
                <a href="#">我的订单</a>
                <a href="#">我的收藏</a>
            </div>

            <div class="box">
                <h3>地点</h3>
                <a href="#">印度</a>
                <a href="#">美国</a>
                <a href="#">日本</a>
                <a href="#">法国</a>
            </div>

            <div class="box">
                <h3>联系方式</h3>
                <a href="#">+123-456-7890</a>
                <a href="#">example@CatTom.com</a>
                <a href="#">重庆批发 - 4000000</a>
                <img src="../images/images-flowers/payment.png" alt="">
            </div>
        </div>


    </section>
    <!-- 底部版权信息部分结束 -->

    <script type="text/javascript" src="../script/main.js"></script>
</body>

</html>